<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀑布流展示图片</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/image.js"></script>
</head>
<body>
	<div id="container">
		<div class="box">
			<div class="box_img">
				<img src="image/1.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/2.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/3.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/4.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/5.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/6.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/7.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/8.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/9.jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/10.jpg">
			</div>
		</div>


	</div>
	<!-- <script type="text/javascript">
	function imgLocation(){
		//将parent下的所有控件全部取出来
		var parent="container";
		var content="box";
		alert(parent);
		var cparent = document.getElementById(parent);
		alert(parent);
		var ccontent = getChildElement(cparent,content);
		alert(parent);
		alert(content.length);
		var imgWidth = ccontent[0].offsetWidth;
		
		var num = Math.floor( document.documentElement.clientWidth/imgWidth);
		alert(num);
		cparent.style.cssText ="width"+imgWidth*num+"px;margin:0 auto";
		var BoxHeightArr = [];
		for(var i =0;i<ccontent.length;i++){
			if(i<num){
				alert("aaaaaaaaaa");
				BoxHeightArr[i]=ccontent[i].offsetHeight;
			}else{
				var minheight = Math.min.apply(null, BoxHeightArr);
				var minIndex=getminheightLocation(BoxHeightArr, minHeight);
				ccontent[i].style.position="absolute";
				ccontent[i].style.top=minheight+"px";
				ccontent[i].style.left =ccontent[minIndex].offsetLeft+"px";
				BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
			
			}
			
		}
	}
	function getChildElement(parent,content){
		var contentArr = [];
		
		var allcontent = parent.getElementsByTagName("*");
		alert(allcontent.length);
		for (var i =0;i<allcontent.length;i++){
			if(allcontent[i].className == content){
				contentArr.push(allcontent[i]);
			}
		}
		
		return contentArr;
	}
	</script> -->
	<button onclick="init()">按钮</button>
</body>
</html>